<template>
	<page-loading :show="stationMsgshow" mode="if">
		<view class="">
			<view class="wrap">
				<view class="liststyle" v-if="stationMsg.payoffStatus === 50">
					<view class="pad-t-b-10 pad-b-25 flex border-bottom-1">
						<view class="width-50">
							<view class="font-32 font-bold">{{ stationMsg.station_Name }}</view>
						</view>
						<view class="width-50 u-text-right">
							<view class="font-24 color-red">{{ returnStatus(stationMsg.payoffStatus) }}</view>
						</view>
					</view>
					<view class="pad-t-b-15 flex flex-jc-sa flex-ai-c u-text-center">
						<view>
							<view class="textTitle color-41CB05">{{ stationMsg.infrastructure_Payoff || 0 }}</view>
							<view class="font-24 color-666">已回本（元）</view>
						</view>
						<view>
							<view class="textTitle">{{ stationMsg.payoffRate || 0 }}%</view>
							<view class="font-24 color-666">回本率</view>
						</view>
						<view>
							<view class="textTitle">{{ stationMsg.infrastructure_Cost || 0 }}</view>
							<view class="font-24 color-666">总需回本（元）</view>
						</view>
					</view>
				</view>
				<view class="pad-t-b-30 flex font-26 border-bottom-1" v-if="stationMsg.payoffStatus !== 50">
					<view class="width-50">
						<view class="font-26 font-bold">{{ stationMsg.station_Name }}</view>
					</view>
					<view class="width-50 u-text-right">
						<view class="color-red">{{ returnStatus(stationMsg.payoffStatus) }}</view>
					</view>
				</view>

				<view class="pad-t-b-30 flex font-26 border-bottom-1">
					<view class="width-50"><view class="color-999">所属场地方：</view></view>
					<view class="width-50 u-text-right">
						<view class="">{{ stationStore.companyName }}</view>
					</view>
				</view>
				<view class="pad-t-b-30 flex font-26 border-bottom-1">
					<view class="width-50"><view class="color-999">联系人：</view></view>
					<view class="width-50 u-text-right">
						<view class="">{{ stationStore.trueName }}</view>
					</view>
				</view>
				<view class="pad-t-b-30  flex font-26 border-bottom-1">
					<view class="width-50"><view class="color-999">联系电话：</view></view>
					<view class="width-50 u-text-right">
						<view class="color-38ACFF">{{ stationStore.phone }}</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="pad-t-b-30 flex font-26 border-bottom-1">
					<view class="width-50"><view class="color-999">所属合伙方：</view></view>
					<view class="width-50 u-text-right">
						<view class="">{{ capitalConstruction.companyName }}</view>
					</view>
				</view>
				<view class="pad-t-b-30 flex font-26 border-bottom-1">
					<view class="width-50"><view class="color-999">联系人：</view></view>
					<view class="width-50 u-text-right">
						<view class="">{{ capitalConstruction.trueName }}</view>
					</view>
				</view>
				<view class="pad-t-b-30  flex font-26 border-bottom-1">
					<view class="width-50"><view class="color-999">联系电话：</view></view>
					<view class="width-50 u-text-right">
						<view class="color-38ACFF">{{ capitalConstruction.phone }}</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="pad-t-b-30  flex font-26 border-bottom-1">
					<view class="width-50"><view class="color-999">站点备案时间：</view></view>
					<view class="width-50 u-text-right">
						<view class="">{{ stationMsg.infrastructureResponse ? stationMsg.infrastructureResponse.review_Time.split('T')[0] : '' }}</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="pad-t-b-10 flex font-26 border-bottom-1">
					<view class="width-50"><view class="color-999" style="line-height: 70rpx;">基建成本：</view></view>
					<view class="width-50 u-text-right ">
						<view class="" v-if="stationMsg.payoffStatus === 100"><u-input v-model="cost" input-align="right" type="number" placeholder="点击输入" /></view>
					  <view class="" style="line-height: 70rpx;" v-else>
					  	￥{{stationMsg.infrastructure_Cost}}
					  </view>
					</view>
				</view>
				<view class="pad-t-b-30 flex font-26 ">
					<view class="width-50"><view class="color-999">基建成本确认证明</view></view>
					<!-- <view class="width-50 u-text-right"><view class="">回本率</view></view> -->
				</view>
				<view class="flex font-26 ">
					<view class="width-40 u-text-center" @click="uploadAvatar('property_Pic_URL')">
						<i-icon icon="iconshangchuan" v-if="property_Pic_URL == ''" type="single" size="160rpx" color="#d1d1d1" class="bgf6f6f"></i-icon>
						<view class="wid160" v-else><image :src="property_Pic_URL" mode=""></image></view>
						<view class="font-22 color-999 mt-10">物业确认证明</view>
					</view>
					<view class="width-40 u-text-center" @click="uploadAvatar('platform_Pic_URL')">
						<i-icon icon="iconshangchuan" v-if="platform_Pic_URL == ''" type="single" size="160rpx" color="#d1d1d1" class="bgf6f6f"></i-icon>
						<view class="wid160" v-else><image :src="platform_Pic_URL" mode=""></image></view>
						<view class="font-22 color-999 mt-10">平台确认证明</view>
					</view>
				</view>
				<view class="" v-if="stationMsg.payoffStatus === 50">
					<view class="pad-t-b-30  flex font-26 border-top-1 mt-40">
						<view class="width-50"><view class="color-999">终审基建成本：</view></view>
						<view class="width-50 u-text-right">
							<view class="font-30 font-bold">￥{{ stationMsg.infrastructureResponse.infrastructure_Cost }}</view>
						</view>
					</view>
					<view class="pad-t-b-10  flex font-26 ">
						<view class="width-25"><view class="color-999">审核时间：</view></view>
						<view class="width-75 ">
							<view class="">{{ stationMsg.infrastructureResponse ? stationMsg.infrastructureResponse.review_Time.split('T')[0] : '' }}</view>
						</view>
					</view>
					<view class="pad-t-b-10  flex font-26 ">
						<view class="width-25"><view class="color-999">审核结果：</view></view>
						<view class="width-75 ">
							<view class="">{{ stationMsg.infrastructureResponse.status }}</view>
						</view>
					</view>
					<view class="pad-t-b-10  flex font-26 ">
						<view class="width-25"><view class="color-999">审核人：</view></view>
						<view class="width-75 ">
							<view class="">{{ stationMsg.infrastructureResponse.reviewer_Name }}</view>
						</view>
					</view>
				</view>
				<view class="pad-t-b-30 mt-40" v-if="stationMsg.payoffStatus === 100"><view class="width-100 line44 btn-bg-yellow" @click="AddStationInfrastructure">提交</view></view>
		
			</view>
			<u-modal
				v-model="upshow"
				title="提交成功"
				content="资料已提交成功，请耐心等待"
				:title-style="{ 'font-size': '17px', 'font-weight': 'bold' }"
				:show-confirm-button="false"
			></u-modal>
			<view class="" v-show="!selectLog"><kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="true" :width="100" :height="100"></kps-image-cutter></view>
		</view>
	</page-loading>
</template>

<script>
import kpsImageCutter from '@/components/ksp-image-cutter/ksp-image-cutter.vue';
export default {
	data() {
		return {
			url: '',
			selectLog: true,
			property_Pic_URL: '', //物业 https://files.yzsheng.com/Auth/81580687a61748a0_a608c8cc5cdb4371acf5310dcc620e60.jpg
			platform_Pic_URL: '', //平台
			picUrlType: '', //选择的图片类型
			cost: null, //基建成本
			Wash_Station_Id: 'dengyujie1',
			stationMsg: {},
			statusList: [
				{ cate_id: 0, cate_name: '全部' },
				{ cate_id: 5, cate_name: '审核中' },
				{ cate_id: 50, cate_name: '回本中' },
				{ cate_id: 100, cate_name: '未录入' },
				{ cate_id: 55, cate_name: '完成' }
			],
			merchant_type: null,
			stationStore: {}, //场地方
			capitalConstruction: {}, //合作方
			stationMsgshow: false,
			upshow: false
		};
	},
	components: {
		kpsImageCutter
	},
	onLoad(options) {
		console.log(options);
		this.Wash_Station_Id = options.id;
	},
	mounted() {
		// this.merchant_type = this.$store.state.user.userInfo.merchant_type;
		this.GetInfrastructureInfoByStationId();
	},
	methods: {
		// 获取站点详情
		async GetInfrastructureInfoByStationId() {
			// this.loadStatus = 'loading'
			try {
				let data = { station_Id: this.Wash_Station_Id };
				const res = await this.$api.washCar.GetInfrastructureInfoByStationId(data);
				this.stationMsg = res.data;
				this.stationMsgshow = true;
				this.property_Pic_URL = res.data.infrastructureResponse ? res.data.infrastructureResponse.property_Pic_URL : '';
				this.platform_Pic_URL = res.data.infrastructureResponse ? res.data.infrastructureResponse.platform_Pic_URL : '';
				// 基建方：1 ； 洗车场地方：2 ； 总设备方：3 ；子设备方：4
				this.stationMsg.storeList.forEach(it => {
					if (it.merchant_Type === 2) {
						this.stationStore = it;
					}
					if (it.merchant_Type === 1) {
						this.capitalConstruction = it;
					}
				});
				console.log(res);
			} catch (e) {
				//TODO handle the exception
			}
		},
		//上传头像
		uploadAvatar(type) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				success: e => {
					console.log(e);
					this.url = e.tempFilePaths[0];
					this.selectLog = false;
					this.picUrlType = type;
				},
				fail: err => {
					// uni.hideLoading()
					this.selectLog = true;
				}
			});
		},
		onok(ev) {
			uni.showLoading({
				title: '上传中'
			});
			console.log(ev);
			// this.path = ev.path;
			this.$api.files
				.uploadImg({
					filePath: ev.path
				})
				.then(res => {
					// this.avatarUrl = res.baseUrl + res.url
					console.log(res);
					this[this.picUrlType] = res.baseUrl + res.url;
					this.url = '';
					uni.hideLoading();
					// this.updateCompanyUserInfo(1);
				})
				.catch(err => {
					console.log(err);
					uni.hideLoading();
				});
			this.selectLog = true;
		},
		oncancle() {
			// // url设置为空，隐藏控件
			this.url = '';
			// this.selectLog = true;
		},
		// 新增站点基建成本
		async AddStationInfrastructure() {
			this.loadStatus = 'loading';
			try {
				let data = {
					self_Service_Car_Wash_Station_Id: this.Wash_Station_Id, //	洗车站ID
					infrastructure_Cost: this.cost, //基建成本
					property_Pic_URL: this.property_Pic_URL, //物业确认证明图片地址
					platform_Pic_URL: this.platform_Pic_URL //平台确认证明图片地址
				};
				let noNull = true;
				for (var key in data) {
					if (data[key] == '') {
						noNull = false;
						uni.showToast({ title: '请上传基建信息证明', icon: 'none' });
						return false;
					}
				}

				const res = await this.$api.washCar.AddStationInfrastructure(data);
				this.upshow = true;
				setTimeout(function() {
					this.upshow = false;
					uni.redirectTo({
						url: '/pages_washCar/putEquipment/putInfrastructure'
					});
				}, 2000);
				console.log(res);
			} catch (e) {
				//TODO handle the exception
			}
		},
		returnStatus(id) {
			let name = '';
			this.statusList.forEach(it => {
				if (id !== 0) {
					if (it.cate_id === id) {
						name = it.cate_name;
					}
				}
			});
			return name;
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	width: 100%;
	padding: 4%;
}
.pad-t-b-30 {
	padding: 33rpx 0rpx;
}
.line {
	height: 10rpx;
	background: #f6f6f6;
}
.bgf6f6f {
	background: #f6f6f6;
}
.line44 {
	height: 88rpx;
	line-height: 88rpx;
}
.mt-40 {
	margin-top: 80rpx;
}
.wid160 {
	width: 240rpx;
	height: 160rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.color-38ACFF {
	color: #38acff;
}
.color-red {
	color: red;
}
.color-41CB05 {
	color: #41cb05 !important;
}
.liststyle {
	width: 100%;
	margin: 20rpx auto;
	padding: 20rpx;
	background: #ffffff;
	box-shadow: 0px 0px 10px 0px rgba(31, 31, 31, 0.1);
	border-radius: 10px;
}
.textTitle {
	font-size: 40rpx;
	color: #333;
	padding: 10rpx 0rpx;
	font-weight: bold;
}
.border-top-1 {
	border-top: 1px solid #f5f5f5;
}
</style>
